<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Filter tests 2</h1>
    <div>
        <button class="enable-a">only a</button>
        <button class="enable-b">only b</button>
        <button class="enable-c">only c</button>
        <button class="enable-d">only d</button>
        <button class="add-entry-filted-in-d">add jg-filtered class in d</button>
        <button class="enable-z">only z</button>
        <button class="enable-all">all</button>
    </div>
    <br/>
    <!-- TODO this test could be automated -->
    <div id="filters">
        <a class="d" href="../photos/8083451788_552becfbc7_b.jpg" title="d - 1">
            <img src="../photos/8083451788_552becfbc7_m.jpg" />
        </a>
        <a class="d" href="../photos/7948632554_01f6ae6b6f_b.jpg" title="d - 2">
            <img src="../photos/7948632554_01f6ae6b6f_m.jpg" />
        </a>
        <a class="d" href="../photos/7302459122_19fa1d8223_b.jpg" title="d - 3">
            <img src="../photos/7302459122_19fa1d8223_m.jpg" />
        </a>
        <a class="a" href="../photos/7222046648_5bf70e893a_b.jpg" title="a - 4">
            <img src="../photos/7222046648_5bf70e893a_m.jpg" />
        </a>
        <a class="a" href="../photos/7002395006_29fdc85f7a_b.jpg" title="a - 5">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" />
        </a>
        <a class="b" href="../photos/7062575651_b23918b11a_b.jpg" title="b - 6">
            <img src="../photos/7062575651_b23918b11a_m.jpg" />
        </a>
        <a class="c" href="../photos/6841267340_855273fd7e_b.jpg" title="c - 7">
            <img src="../photos/6841267340_855273fd7e_m.jpg" />
        </a>
        <a class="c" href="../photos/6958456697_e56a37bb5f_b.jpg" title="c - 8">
            <img src="../photos/6958456697_e56a37bb5f_m.jpg" />
        </a>
        <a class="c" href="../photos/6791628438_affaa19e10_b.jpg" title="c - 9">
            <img src="../photos/6791628438_affaa19e10_m.jpg" />
        </a>
        <a class="a" href="../photos/6916180091_9c9559e463_b.jpg" title="a - 10">
            <img src="../photos/6916180091_9c9559e463_m.jpg" />
        </a>
        <a class="b" href="../photos/6880502467_d4b3c4b2a8_b.jpg" title="b - 11">
            <img src="../photos/6880502467_d4b3c4b2a8_m.jpg" />
        </a>
        <a class="a" href="../photos/6876412479_6268c6e2aa_b.jpg" title="a - 12">
            <img src="../photos/6876412479_6268c6e2aa_m.jpg" />
        </a>
        <a class="c" href="../photos/6840627709_92ed52fb41_b.jpg" title="c - 13">
            <img src="../photos/6840627709_92ed52fb41_m.jpg" />
        </a>
        <a class="a" href="../photos/6812090617_5fd5bbdda0_b.jpg" title="a - 14">
            <img src="../photos/6812090617_5fd5bbdda0_m.jpg" />
        </a>
        <a class="b" href="../photos/6806687375_07d2b7a1f9_b.jpg" title="b - 15">
            <img src="../photos/6806687375_07d2b7a1f9_m.jpg" />
        </a>
        <a class="a" href="../photos/6798453217_72dea2d06e_b.jpg" title="a - 16">
            <img src="../photos/6798453217_72dea2d06e_m.jpg" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../bower_components/colorbox/jquery.colorbox.js"></script>
    <script src="../../bower_components/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
        $('.enable-a').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
                return $(entry).is('.a');
            }});
        });
        $('.enable-b').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
                return $(entry).is('.b');
            }});
        });
        $('.enable-c').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
                return $(entry).is('.c');
            }});
        });
        $('.enable-d').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
                return $(entry).is('.d');
            }});
        });
        $('.enable-z').click(function () {
            $("#filters").justifiedGallery({ filter: function (entry, index, array) {
                return $(entry).is('.z');
            }});
        });
        $('.enable-all').click(function () {
            $("#filters").justifiedGallery({ filter: false });
        });
        $('.add-entry-filted-in-d').click(function () {
            $("#filters > a").removeClass('jg-filtered');
            $("#filters > a.d").addClass('jg-filtered');
            $("#filters").justifiedGallery({ filter: false });
        });

        $("#filters").justifiedGallery();
    </script>
</body>

</html>
